<template>
  <treeselect class="tree-select" :style="{ width: width + 'px', height: height + 'px', lineHeight: height + 'px', }"
    :append-to-body="true" :disable-branch-nodes="true" v-model="sysProjectId" :options="treeData"
    :normalizer="normalizer" :clearable="clearable" placeholder="请选择项目">
    <div slot="value-label" slot-scope="{ node }" class="customize-select">
      <span class="left-label is-branch" v-show="sysProjectId">{{ node.label }}</span>
      <span v-show="sysProjectId">{{ node.raw.deptNameShort }}</span>
    </div>
    <label slot="option-label" slot-scope="{ node}" class="customize-select">
      <span v-if="node.isBranch">{{ node.raw.shortLable }}</span>
      <span v-if="node.isLeaf" class="left-label" :title="node.label">{{ node.label }}</span>
      <span v-if="node.isLeaf" class="right-label" :title="node.raw.deptName">{{ node.raw.deptNameShort }}</span>
    </label>
  </treeselect>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "ProjectTreeSelect",
  components: {
    Treeselect
  },
  props: {
    // 树结构数据
    data: {
      type: Array,
      default () {
        return [];
      }
    },
    width: {
      type: Number,
      default () {
        return 255;
      }
    },
    height: {
      type: Number,
      default () {
        return 32;
      }
    },
    /**是否展示清空按钮 */
    clearable: {
      type: Boolean,
      default () {
        return false;
      }
    },
    // 是否为内部页面
    isInner: {
      type: Boolean,
      default () {
        return false;
      }
    }
  },
  data () {
    return {};
  },
  computed: {
    treeData: {
      get () {
        return this.$store.state.project.projectList;
      }
    },
    sysProjectId: {
      get () {
        return this.$store.state.project.projectId;
      },
      set (val) {
        if (this.isInner) {
          this.$emit('changeProject', val);
        } else {
          this.$store.dispatch("changeProject", val);
        }
      }
    }
  },
  created () { },
  mounted () { },
  methods: {
    /** 转换菜单数据结构 */
    normalizer (node) {
      // if (node.labFlag && node.labFlag == 1) {
      //   node.isDisabled = false;
      // } else {
      //   node.isDisabled = true;
      // }
      return {
        ...node,
        key: node.value,
        id: node.value,
        label: node.label,
        children: node.children
      };
    },
  }
};
</script>
<style lang="scss" scoped>
.is-branch {
  position: relative;
  left: 0px !important;
}

.left-label {
  position: relative;
  left: 0px;
  width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #606060;
  font-weight: 500;
}

.right-label {
  display: inline-block;
  width: 45px;
  /* 定义容器的宽度 */
  white-space: nowrap;
  /* 防止文本换行 */
  overflow: hidden;
  /* 隐藏超出的文本 */
  text-overflow: ellipsis;
  /* 显示省略号 */
}

::v-deep {
  .vue-treeselect__control {
    height: 32px !important;
  }

  .vue-treeselect__placeholder,
  .vue-treeselect__single-value {
    line-height: 32px !important;
  }

  .vue-treeselect__input {
    height: 32px !important;
  }

  .vue-treeselect__options {}

  .vue-treeselect__control {}


}
</style>
